<template>
  <div class="hdm">
    <div class="hdm_box">
      <ul>
        <li >
          <a href="#">家用电器</a>
          <HDMHidden />
        </li>
        <li>
          <a href="#">手机</a>
          <span>/</span>
          <a href="#">运营商</a>
          <span>/</span>
          <a href="#">数码</a>
          <HDMHidden />
        </li>
        <li>
          <a href="#">电脑</a>
          <span>/</span>
          <a href="#">办公</a>
           <HDMHidden />
        </li>
        <li>
          <a href="#">家居</a>
          <span>/</span>
          <a href="#">家具</a>
          <span>/</span>
          <a href="#">家装</a>
          <span>/</span>
          <a href="#">厨具</a>
           <HDMHidden />
        </li>
        <li>
          <a href="#">男装</a>
          <span>/</span>
          <a href="#">女装</a>
          <span>/</span>
          <a href="#">童装</a>
          <span>/</span>
          <a href="#">内衣</a>
           <HDMHidden />
        </li>
        <li>
          <a href="#">美妆</a>
          <span>/</span>
          <a href="#">个护清洁</a>
          <span>/</span>
          <a href="#">宠物</a>
           <HDMHidden />
        </li>
        <li>
          <a href="#">女鞋</a>
          <span>/</span>
          <a href="#">箱包</a>
          <span>/</span>
          <a href="#">钟表</a>
          <span>/</span>
          <a href="#">珠宝</a>
           <HDMHidden />
        </li>
        <li>
          <a href="#">男鞋</a>
          <span>/</span>
          <a href="#">运动</a>
          <span>/</span>
          <a href="#">户外</a>
           <HDMHidden />
        </li>
        <li>
          <a href="#">房产</a>
          <span>/</span>
          <a href="#">汽车</a>
          <span>/</span>
          <a href="#">汽车用品</a>
           <HDMHidden />
        </li>
        <li>
          <a href="#">母婴</a>
          <span>/</span>
          <a href="#">玩具乐器</a>
           <HDMHidden />
        </li>
        <li>
          <a href="#">食品</a>
          <span>/</span>
          <a href="#">酒类</a>
          <span>/</span>
          <a href="#">生鲜</a>
          <span>/</span>
          <a href="#">特产</a>
           <HDMHidden />
        </li>
        <li>
          <a href="#">艺术</a>
          <span>/</span>
          <a href="#">礼品鲜花</a>
          <span>/</span>
          <a href="#">农资绿植</a>
           <HDMHidden />
        </li>
        <li>
          <a href="#">医药保健</a>
          <span>/</span>
          <a href="#">计生情趣</a>
           <HDMHidden />
        </li>
        <li>
          <a href="#">图书</a>
          <span>/</span>
          <a href="#">文娱</a>
          <span>/</span>
          <a href="#">电子书</a>
           <HDMHidden />
        </li>
        <li>
          <a href="#">机票</a>
          <span>/</span>
          <a href="#">酒店</a>
          <span>/</span>
          <a href="#">旅游</a>
          <span>/</span>
          <a href="#">生活</a>
           <HDMHidden />
        </li>
        <li>
          <a href="#">理财</a>
          <span>/</span>
          <a href="#">众筹</a>
          <span>/</span>
          <a href="#">白条</a>
          <span>/</span>
          <a href="#">保险</a>
           <HDMHidden />
        </li>
        <li>
          <a href="#">安装</a>
          <span>/</span>
          <a href="#">维修</a>
          <span>/</span>
          <a href="#">清洗</a>
          <span>/</span>
          <a href="#">二手</a>
           <HDMHidden />
        </li>
        <li>
          <a href="#">工业品</a>
           <HDMHidden />
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import HDMHidden from "./HDMHidden";
export default {
  name: "HDM",
  data() {
    return {};
  },
  components: {
    HDMHidden
  }
};
</script>
<style lang="less" scoped>
.hdm {
  width: 190px;
  float: left;
  height: 480px;
  margin-right: 10px;
  .hdm_box {
    position: relative;
    z-index: 2;
    ul {
      padding: 6px 0;
      height: 468px;
      overflow: hidden;
      background-color: #fefefe;
      color: #636363;
      li {
        height: 26px;
        line-height: 26px;
        overflow: hidden;
        padding-left: 18px;
        text-align: left;
        transition: background-color 0.2s ease;
        a {
          font-size: 14px;
          color: #626262;
          transition: color 0.2s ease;
        }
        a:hover {
          color: #c81623;
        }

        span {
          padding: 0 2px;
          font-size: 12px;
        }
        .hdm-hidden {
          top: 0px;
          display: none;
          left: 191px;
          background-color: #fff;
          position: absolute;
          width: 998px;
          height: 480px;
          border: 1px solid #f7f7f7;
          background-color: #fff;
          box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
          transition: top 0.25s ease;
        }
      }
      li:hover .hdm-hidden{
        display: block;
      }
    }
  }
}
</style>

